<!--
 * @Author: fisher
 * @Date: 2022-12-16 22:45:48
 * @LastEditTime: 2022-12-23 21:46:55
 * @LastEditors: your name
 * @Description: 
 * @FilePath: /vite-vue-ts-h5/src/pages/home/home.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<style lang="scss" scoped>
.home {
  font-size: 14px;
  text-align: center;
  width: 100%;
  padding: 15px;
  background-color: var(--primary);
  border-radius: 10px;
  display: grid;
  color: var(--white);
}
.list {
  padding: 10px;
  li {
    margin-bottom: 10px;
    text-align: center;
  }
}
</style>
<template>
  <div class="home">{{ msg }}</div>
  <ul class="list">
    <li>count:{{ count }}</li>
    <li>
      <m-button type="primary" block size="small" @click.stop="addCount(10)"
        >加 count 10</m-button
      >
    </li>
    <li>
      <m-button type="primary" block size="small" @click.stop="setCount"
        >加 count 20</m-button
      >
    </li>
    <li>
      {{ countAdd100 }}
    </li>
    <li>
      <m-button type="primary" block size="normal">{{ t('睿睿') }}</m-button>
    </li>
    <li>
      <m-button type="primary" block size="normal" @click.stop="changeLan">{{
        t('切换语言')
      }}</m-button>
    </li>
    <li>
      <m-button type="primary" block size="normal" @click.stop="postReq">
        发post请求</m-button
      >
    </li>
    <li>
      <m-button type="primary" block size="normal" @click.stop="getReq">
        发get请求</m-button
      >
    </li>
  </ul>
</template>

<script setup lang="ts">
import apis from '../../api/home'
import { useHomeStore, storeToRefs } from '@/store'

const { t, locale } = useI18n()
const msg = ref()
const homeStore = useHomeStore()
// store 和计算属性必须用storeToRefs才能响应式
const { count, countAdd100 } = storeToRefs(homeStore)
const { addCount } = homeStore
msg.value = t('谁来了', { who: t('睿睿') })
function changeLan() {
  console.log(locale.value)
  locale.value = locale.value === 'zh' ? 'en' : 'zh'
  msg.value = t('谁来了', { who: t('睿睿') })
}
function setCount() {
  // homeStore.count += 20
  homeStore.$patch((store) => {
    store.count += 20
  })
}
function getReq() {
  apis.testGet({ params: { get: 1 } })
}
function postReq() {
  apis.testPost({ data: { post: 2 } })
}
</script>
